
<template>
  <div class="section-container">
    <div class="mb-20">
      <el-card class="box-card" shadow="never">
        <div class="clearfix">
          <div class="course-img fl">
            <img :src="course_img" class="image">
          </div>
          <div class="course-desc fr">
            <h2>{{ course_topic }}</h2>
            <p>{{ course_desc }}</p>
            <a class="start-learn mt-15" href="/videos/11011">
              <el-button type="primary" icon="el-icon-edit">
                立即学习
              </el-button>
            </a>
          </div>
        </div>
      </el-card>
    </div>
    <div class="mb-20 course-body">
      <el-card class="box-card" shadow="never">
        <div class="course-relatives">
          <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="课程目录" name="first">
              <div class="course-chapters">
                <div v-for="(item, index) in video_list" :key="index" class="chapter course-wrap">
                  <h3 class="text-l">{{ item.chapter }}</h3>
                  <div class="chapter-description"></div>
                  <ul class="video">
                    <li v-for="(item2, index2) in item.list" :key="index2">
                      <a :href="item2.url" class="text-l text-ellipsis">{{ item2.title }}</a>
                    </li>
                  </ul>
                </div>
              </div>
              <div class="comment-list list">
                <comment :comments="comments" @reply-to="replyHandle"></comment>
                <div v-if="isLoaded && comments.length==0" class="no-more-reply">还没有人评论哦！快来抢沙发吧！</div>
                <div v-show="comments.length >= 1 && activeName=='second'" class="pagination-container">
                  <el-pagination
                    :current-page="currentPage"
                    @current-change="handleCurrentChange"
                    background
                    :page-size="10"
                    :pager-count="pagerCount"
                    layout="prev, pager, next"
                    :total="totalPage">
                  </el-pagination>
                </div>
              </div>
            </el-tab-pane>
            <el-tab-pane label="课程评论" name="second">
              <div :class="{'no-login': !isLogin}" class="comment-form clearfix">
                <div class="user-face fl hidden-xs-only">
                  <i v-if="!isLogin" class="user-head fa fa-user-circle"></i>
                  <img v-if="isLogin" class="user-head" :src="avator" alt="">
                </div>
                <div class="textarea-container">
                  <div class="baffle" v-if="!isLogin">
                    请先
                    <el-button @click="showLogin(1)" size="mini" type="primary">  登录
                    </el-button>
                    后发表评论 (・ω・)
                  </div>

                  <textarea @keyup="inputText" ref="comment" name="comment" id="" cols="30" rows="10" v-model="in_text"
                  :placeholder="placeholder" class="comment-area"
                   :class="{'in-err': !in_success}">
                   </textarea>
                  <div class="num-limit">
                    <span class="in-text">{{ text_num }}</span>/100
                  </div>
                  <el-button @click="submitComment" :disabled="!isLogin" type="primary" class="fr comment-submit">
                    发表评论
                  </el-button>

                  <transition 
                    @after-enter="afterEnter"
                    name="bounce">
                    <div v-if="in_err_msg" class="comment-alert">
                      <el-alert
                        :title="in_err_msg"
                        :closable="false"
                        class="fl"
                        type="error"
                        show-icon>
                      </el-alert>
                    </div>
                  </transition>
                  
                </div>
                
              </div>
              <div class="comment-list list">
                <comment :comments="comments" @reply-to="replyHandle"></comment>
                <div v-if="isLoaded && comments.length==0" class="no-more-reply">还没有人评论哦！快来抢沙发吧！</div>
                <div v-show="comments.length >= 1 && activeName=='second'" class="pagination-container">
                  <el-pagination
                    :current-page="currentPage"
                    @current-change="handleCurrentChange"
                    background
                    :page-size="10"
                    :pager-count="pagerCount"
                    layout="prev, pager, next"
                    :total="totalPage">
                  </el-pagination>
                </div>
              </div>
            </el-tab-pane>
            <el-tab-pane label="课程问答" name="three">
              <div class="clearfix">
                <el-button @click="ask" class="btn btn-default pull-right" type="primary">
                  我要提问
                </el-button>
              </div>

              <div class="question-list list">
                <ul>
                  <li class="question-wrap list-item" v-for="(item, index) in questions" :key="index">
                    <div class="user-face fl">
                      <img :src="avator" alt="" />
                    </div>
                    <div class="con">
                      <div class="user-info">
                        <span class="user-name">{{ item.author }}</span>
                      </div>
                      <p class="desc">{{ item.topic }}</p>
                      <div class="code-container" v-html="item.content">
                      </div>
                      <div class="info">
                        <span class="time">{{ item.createdAt }}</span>
                      </div>
                    </div>
                  </li>
                </ul>
                <div v-if="isLoaded && questions.length==0" class="no-more-reply">还没有人提问哦！快来抢沙发吧！</div>
                <div v-show="questions.length >= 1 && activeName =='three'" class="pagination-container">
                  <el-pagination
                    :current-page="currentPage2"
                    @current-change="handleCurrentChange2"
                    background
                    :page-size="10"
                    :pager-count="pagerCount2"
                    layout="prev, pager, next"
                    :total="totalPage2">
                  </el-pagination>
                </div>
              </div>
            </el-tab-pane>
          </el-tabs>
        </div>
            
      </el-card>
    </div>

    <question-box v-if="show_editor == 1" @cancel="cancelSubmit" @submitted="submitQuestion">
      <div slot="chapter" class="wenda-chapter">
        <el-dropdown @command="handleCommand" trigger="click">
          <el-button type="primary">
            <span>{{ sel_chapter }}</span><i class="el-icon-arrow-up el-icon--right"></i>
          </el-button>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item 
              v-for="chapter in chapter_list"
              :command="chapter"
              :key="chapter.videoid">{{ chapter.title }}
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <el-alert
          class="wenda-chapter-tips"
          title="正确关联章节，使得问题得到有效回答"
          type="info"
          :closable="false">
        </el-alert>
      </div>
    </question-box>
  </div>
</template>

<script>
  import Vue from 'vue'
  import axios from 'axios'
  import { mapGetters, mapMutations, mapActions } from 'vuex'
  import 'highlight.js/styles/atom-one-dark.css'
  import Comment from 'components/comment'
  import QuestionBox from "pages/question-box"

  export default {
    data() {
      return {
        isLogin: localStorage.getItem('user_info') ? true : false,
        activeName: 'first',
        course_id: '3001',
        course_topic: '微信支付-扫码支付',
        course_desc: '扫码支付是商户系统按微信支付协议生成支付二维码，用户再用微信“扫一扫”完成支付的模式。该模式适用于PC网站支付、实体店单品或订单支付、媒体广告支付等场景。',
        course_img: 'http://avatar.wpn.itlukai.com/71cf3bc79f3df8dc688047f1c111728b47102815.jpg',
        course_list: [],

        currentPage: 1,
        pagerCount: 7,
        totalPage: 7,
        commentid: '',
        tid: '',
        placeholder: '来说点什么吧',

        currentPage2: 1,
        pagerCount2: 7,
        totalPage2: 7,

        detail_url: '',
        comments: [],
        questions: [],
        in_text: '',
        in_err_msg: '',
        text_num: 0,
        avator: 'http://avatar.wpn.itlukai.com/panda.jpg',
        isLoaded: false,
        in_success: true,
        sel_chapter: '选择关联章节',
        sel_chapter_id: '',
        video_list: [
          {
            chapter: "准备", 
            list:[
              {
                title: '演示：公众号支付', 
                url: '/videos/11011',
                videoid: 11011
              },
              {
                title: '准备项目', 
                url: '/videos/11012',
                videoid: 11012
              }
            ]
          },
          {
            chapter: '授权', 
            list:[
              {
                title: '配置网页授权目录与支付授权目录', 
                url: '/videos/11021',
                videoid: 11021
              }, 
              {
                title: 'OpenID 与 UnionID', 
                url: '/videos/11022',
                videoid: 11022
              },
              {
                title: '微信网页授权：获取 code 值', 
                url: '/videos/11023',
                videoid: 11023
              },
              {
                title: '微信网页授权：获取 access_token，得到用户的 openid', 
                url: '/videos/11024',
                videoid: 11024
              }
            ]
          },
          {
            chapter: '公众号支付', 
            list:[
              {
                title: '公众号支付：统一下单', 
                url: '/videos/11031',
                videoid: 11031
              }, 
              {
                title: 'JSAPI：准备参数与支付', 
                url: '/videos/11032',
                videoid: 11032
              }
            ]
          }
        ],
      };
    },
    computed: {
      ...mapGetters([
          'show_editor',
        ]),
      chapter_list: function () {
        return this.video_list.reduce((prev, curr) => {
          return (prev.list || prev).concat(curr.list)
        })
      }
    },
    components: {
      Comment,
      QuestionBox
    },
    directives: {
    },
    methods: {
      ...mapMutations({
        showEditor: 'SHOW_EDITOR',
        showLogin: 'SHOW_LOGIN',
        askQuestion: 'ASK_QUESTION',
      }),
      ...mapActions({
        getCourseList: 'getCourseList',
        postComment: 'postComment',
        getComments: 'getComments',
        postQuestion: 'postQuestion',
        getQuestions: 'getQuestions'
      }),
      afterEnter() {
        this.in_err_msg = ''
      },
      handleClick(tab, event) {
        if (tab.name == "second") {
          this.renderComment()  
        }
        else if (tab.name == "three") {
          this.renderQuestion()  
        }
      },
      handleCurrentChange(page) {
        this.currentPage = page
        this.renderComment()
      },
      handleCurrentChange2(page) {
        this.currentPage2 = page
        this.renderQuestion()
      },
      handleCommand(command) {
        console.log(command.title)
        console.log(command.videoid)
        this.sel_chapter = command.title
        this.sel_chapter_id = command.videoid
      },
      ask() {
        if (this.isLogin) {
          this.showEditor(1)
        }
        else {
          this.showLogin(1)
        }
      },
      cancelSubmit() {
        this.showEditor(0)
      },
      submitQuestion(topic, content) {
        let self = this
        console.log(self.$route)
        self.postQuestion({
          courseid: self.$route.params.id,
          videoid: self.sel_chapter_id,
          topic: topic,
          content: content
        })
        .then((res) => {
          console.log(res)
          self.isLoaded = true
          let { code, msg } = res.data
          if (code == 0) {
            self.renderQuestion()
            self.showEditor(0)
            self.topic = ''
          } else {
            self.showLogin(1)
          }

        })
      },
      renderQuestion() {
        let self = this
        console.log(self.$route.params.id)
        self.getQuestions({
          courseid: self.$route.params.id,
          page: self.currentPage2
        })
        .then((res) => {
          console.log(res)
          self.isLoaded = true
          let { code, data, count } = res.data
          if (code == 0) {
            self.questions = data
            self.totalPage2 = count
          }
        })
      },
      replyHandle({cid, tid, replyer}) {
        console.log(cid)
        console.log(tid)
        this.commentid = cid
        this.tid = tid

        this.placeholder = '回复：' + replyer
        this.$refs.comment.focus()
      },
      submitComment() {
        let self = this
        self.text_num = self.in_text.trim().length

        if (self.text_num == 0) {
          self.in_success = false
          self.in_err_msg = '评论内容不能为空'
        }
        else if(self.text_num < 7) {
          self.in_success = false
          self.in_err_msg = '您输入的内容有点少哦'
        }
        else if(self.text_num > 100) {
          self.in_success = false
          self.in_err_msg = '字数超过啦'
        }
        else {
          self.in_success = true
          self.in_err_msg = ''
        }

        if (!self.in_success) {
          return
        }
        
        self.postComment({
          commentid: self.commentid,
          tid: self.tid,
          courseid: self.course_id, 
          content: self.$refs.comment.value
        })
        .then((res) => {
          console.log(res)
          let { code, msg } = res.data

          if (code == 0) {
            self.in_text = ''
            self.text_num = 0
            self.renderComment()
          } else {
            self.showLogin(1)
          }

        })
      },
      renderComment() {
        console.log(12455)
        console.log(this.$route.params.id)
        console.log(this.currentPage)
        this.getComments({
          courseid: this.$route.params.id,
          page: this.currentPage
        })
        .then((res) => {
          console.log(res)
          let { code, data, count } = res.data
          if (code == 0) {
            this.comments = data
            this.totalPage = count
          }
        })
      },
      inputText() {
        let self = this
        self.text_num = self.in_text.trim().length
        if (self.text_num == 0) {
          self.in_success = true
        }
        else if(self.text_num < 7) {
          self.in_success = false
        }
        else if(self.text_num > 100) {
          self.in_success = false
        }
        else {
          self.in_success = true
        }
      }
    },

    created () {
      // let self = this
      // if (document.documentElement.clientWidth < 600) {
      //   self.pagerCount = 5
      // }
      // console.log(self.$route.params.id)
      // self.getCourseList(self.$route.params.id)
      //   .then((res) => {
      //     let { data } = res
      //     self.course_topic = data.topic
      //     self.course_desc = data.desc
      //     self.course_img = data.img
      //     self.course_list = data.pages
      //     self.course_id = data.courseid
      //     self.detail_url = data.url
      //   })
    }
  }
</script>

<style scoped lang="less">
  .ql-syntax {
    display: block;
    overflow-x: auto;
    padding: 0.5em;
    color: #abb2bf;
    background: #282c34;
  }
  .el-input-group__append button.el-button {
    background: #409EFF;
    border: 1px solid #409EFF;
    color: #fff;
    border-radius: 0 4px 4px 0;
  }
  .el-dropdown-menu {
    max-height: 360px;
    overflow: auto;
  }
  .wenda-chapter-tips {
    float: left;
    width: auto;
  }
  .text {
    font-size: 14px;
  }

  .box-card {
    border: none;
    .course-img {
      width: 45%;
      height: 180px;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .course-desc {
      width: 45%;
      height: 180px;
      h2 {
        line-height: 36px;
        height: 36px;
        font-size: 16px;
      }
      p {
        text-indent: 2em;
        font-size: 14px;
        line-height: 28px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        /* autoprefixer: off */
        -webkit-box-orient: vertical;
        /* autoprefixer: on */
      }
      .start-learn {
        color: #fff;
        display: inline-block;
      }
    }
  }

  .text-ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .course-body {
    .el-card__body {
      border: none;
      .el-tabs__content {
        overflow: visible;
      }
    }
  }
  
  .course-relatives {
    padding-bottom: 10px;
    .course-wrap {
      margin-bottom: 15px;
      padding: 24px 32px 32px;
      background: #FFF;
      box-shadow: 0 2px 4px 0 rgba(7, 17, 27, 0.1);
      border-radius: 12px;
      h3 {
        color: #1c1f21;
        font-size: 16px;
        font-weight: 700;
        line-height: 24px;
      }
    }
    .chapter {
      .video {
        padding-top: 16px;
        li {
          position: relative;
          padding-left: 12px;
          height: 48px;
          line-height: 48px;
          &:hover {
            background: rgba(242,13,13,.05);
            border-radius: 4px;
            color: #F20D0D;
          }
          a {
            color: #1c1f21;
            width: 100%;
            display: block;
            overflow: hidden;
            word-break: break-all;
          }
        }
      }
    }

    .list {
      .list-item {
        position: relative;
        text-align: left;
        padding: 24px 0 4px;
        border-bottom: 1px solid #efefef;
      }

      .no-more-reply {
        color: #99a2aa;
        text-align: center;
        padding: 30px 0;
        font-size: 12px;
      }
    }

    .comment-form {
      margin: 30px 0;
      .user-face {
        position: relative;
        margin: 7px 0 0 5px;
        .user-head {
          width: 48px;
          height: 48px;
          font-size: 48px;
          border-radius: 50%;
        }
      }
    }

    .comment-form-unlogin {
      width: 100%;
      height: 120px;
      background: #fafbfa;
      font-size: 14px;
      text-align: center;
      line-height: 136px;
    }

    .comment-form-unlogin a {
      color: #0c9;
      cursor: pointer;
    }
    
    .comment-box {
      position: relative;
      margin-left: 85px;
      margin-right: 80px;
      border: 1px solid #ececec;
      background: #fff;
      margin-bottom: 50px;
      border-radius: 2px;
      .el-alert {
        position: absolute;
        left: 0;
        bottom: -50px;
        width: auto;
        overflow: hidden;
      }
    }

    .no-login {
      .baffle {
        display: block;
        position: absolute;
        z-index: 102;
        width: 100%;
        top: 0;
        line-height: 64px;
        font-size: 12px;
        border-radius: 4px;
        text-align: center;
        color: #777;
        background-color: #e5e9ef;
        overflow: hidden;
      }
      textarea {
        background-color: #e5e9ef;
      }
      .comment-submit {
        cursor: default;
        background-color: #e5e9ef !important;
        border-color: #e5e9ef !important;
        color: #b8c0cc !important;
      }
    }

    .textarea-container {
      position: relative;
      margin-left: 85px;
      margin-right: 80px;
      
      textarea {
        position: relative;
        z-index: 9;
        outline: none;
        resize: none;
        font-size: 12px;
        display: inline-block;
        box-sizing: border-box;
        background-color: #f4f5f7;
        border: 1px solid #e5e9ef;
        overflow: auto;
        border-radius: 4px;
        color: #555;
        width: 100%!important;
        height: 65px;
        padding: 5px 10px;
        line-height: normal;
      }
      .in-err {
        border-color: #f56c6c;
      }
      .num-limit {
        z-index: 10;
        position: absolute;
        line-height: 100%;
        font-size: 12px;
        right: 5px;
        bottom: 10px;
        color: #d0d6d9;
      }
      .comment-submit {
        width: 70px;
        height: 64px;
        position: absolute;
        right: -80px;
        top: 0;
        padding: 4px 15px;
        white-space: normal;
        line-height: 1.5;
      }
      .comment-alert {
        transition: opacity, top .5s;
        position: absolute;
        left: 0;
        top: 70px;
        opacity: 0;
      }

      .bounce-enter-active {
        animation: bounce-in 2s;
      }
      @keyframes bounce-in {
        0% {
          opacity: 0;
          top: 30px;
        }
        30% {
          opacity: 1;
          top: 70px;
        }
        90% {
          opacity: 1;
          top: 70px;
        }
        100% {
          opacity: 0;
          top: 70px;
        }
      }
    }

    .comment-list,
    .question-list {
      padding-top: 20px;
      .list-item {
        .user-face {
          margin: 24px 0 0 5px;
          position: relative;
          img {
            width: 48px;
            height: 48px;
            border-radius: 50%;
          }
        }
        .con {
          position: relative;
          margin-left: 85px;
          padding: 22px 0 14px;
          .user-name {
            cursor: pointer;
          }
          .user {
            font-size: 12px;
            font-weight: 700;
            line-height: 18px;
            padding-bottom: 4px;
            display: block;
            word-wrap: break-word;
            color: #6d757a;
          }
          .desc {
            position: relative;
            line-height: 20px;
            padding: 2px 0;
            font-size: 14px;
            text-shadow: none;
            overflow: hidden;
            word-wrap: break-word;
            word-break: break-word;
          }
          
          .info {
            color: #99a2aa;
            line-height: 26px;
            font-size: 12px;
          }
        }
      }
      .pagination-container {
        margin-top: 30px;
      }
      .no-more-reply {
        color: #99a2aa;
        text-align: center;
        padding: 30px 0;
        font-size: 12px;
      }
      .reply-box {
        background-color: #f5f6f7;
        font-size: 12px;
        padding: 10px 20px;
        margin: 10px 0;
        li {
          .reply-info {
            .r-user {
              color: #777777;
              line-height: 26px;
              cursor: pointer;
            }
            .reply-desc {
              line-height: 26px;
              padding: 0 10px;
            }
            .quot {
              line-height: 26px;
            }
            .reply-txt {
              line-height: 26px;
            }
          }
        }
      }
    }
  }

  @media (max-width: 767px) {
    .box-card .course-img,
    .box-card .course-desc {
      width: 100%;
    }
    .course-relatives .textarea-container {
      margin-left: 0;
    }
  }

  @media (min-width: 375px) and (max-width: 414px) {
    .el-pagination.is-background .el-pager li {
      min-width: 24px;
      margin: 0 3px;
    }
  }

  @media (max-width: 374px) {
    .el-pagination.is-background .el-pager li {
      min-width: 16px;
      margin: 0 2px;
    }
  }
  
</style>




